.invite-rewards-modal {
    width: 7.17rem;
    position: absolute;
    z-index: 11000;
    left: 50%;
    margin-left: -3.57rem;
    top: .1rem;
    text-align: center;
    opacity: 0;
    background: url(../img/modal-bg.png) no-repeat center center;
    background-size: cover;
    height: 9.6rem;
    -webkit-transform: translate3d(0, 0, 0) scale(1.185);
    transform: translate3d(0, 0, 0) scale(1.185);
    -webkit-transition-property: -webkit-transform, opacity;
    transition-property: transform, opacity;
    color: #3d4145;
    display: none;
}

.invite-rewards-modal.modal-in {
    display: block;
    opacity: 1;
    -webkit-transition-duration: .4s;
    transition-duration: .4s;
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
}

.invite-rewards-modal .modal-close {
    position: absolute;
    background: url(../img/modal-close.png) no-repeat center center;
    background-size: cover;
    width: .9rem;
    height: .8rem;
    right: .15rem;
    top: 1.3rem;
    z-index: 11001;
}

.invite-rewards-modal .modal-nav {
    position: absolute;
    background: url(../img/modal-nav.png) no-repeat center center;
    background-size: cover;
    width: 100%;
    top: 1.9rem;
    z-index: 11001;
    color: #0c0c0d;
    font-size: .36rem;
    line-height: .36rem;
    padding-left: .5rem;
    height: .36rem;
}

.modal-ul {
    position: absolute;
    top: 2.7rem;
    padding: 0px .6rem;
    color: #343436;
    font-size: .26rem;
    text-align: left;
    height: 6.77rem;
    overflow: scroll;
}

.modal-ul li {
    position: relative;
    margin-top: .35rem;
    line-height: .28rem;
    height: auto;
}

.modal-ul li:first-child {
    margin-top: 0px;
}

.modal-ul li .order {
    position: absolute;
    left: 0px;
    display: inline-block;
    width: .3rem;
}

.modal-ul li .text {
    width: 100%;
    display: inline-block;
    margin-left: .3rem;
}

.modal-overlay.modal-overlay-visible {
    visibility: visible;
    opacity: 1;
}

.modal-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4);
    z-index: 10600;
    visibility: hidden;
    opacity: 0;
    -webkit-transition-duration: .4s;
    transition-duration: .4s;
}

.dialog-alert {
    position: fixed;
    opacity: 0;
    visibility: hidden;
    z-index: 10600;
    top: 50%;
    left: .4rem;
    right: .4rem;
    font-size: .3rem;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    text-align: center;
    padding: .25rem .1rem;
    border-radius: .03rem;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
